<!-- @module info -->
<!-- @author: jinyb -->
<!-- @description: 消息查询 -->
<!-- @since: 2020-08-10 15:20:46 -->

<template>
  <el-card class="box-card el-card-flex">
   <div  slot="header" class="clearfix">
      <span>
        <i class="el-icon-position"></i>
         查询信息
        </span>
   </div>
    <!-- form begin -->
   <div style="margin: 10px">
    <el-form ref="queryForm" label-width="120px" class="div-header"
             :model="queryForm"  size="mini" >

        <!--<legend class="legend-font" v-text="text_form" />-->
        <el-row :gutter="10">

          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="5">
            <el-form-item label="消息标题:" prop="msgTitle" >
              <el-input v-model="queryForm.msgTitle" placeholder="标题" style="width: 240px"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="5">
            <el-form-item label="开始时间:" prop="startDate" >
              <el-date-picker v-model="queryForm.startDate" style="width:240px" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="5" >
            <el-form-item label="结束时间:" prop="endDate" >
              <el-date-picker v-model="queryForm.endDate" style="width:240px;" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="5">
            <el-form-item label="应用名称:">
              <el-select v-model="queryForm.appName" clearable placeholder="请选择" style="width:240px">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="5">
            <el-form-item label="消息状态:">
              <el-select v-model="queryForm.mcStatus" clearable placeholder="请选择" style="width:240px">
                <el-option
                  v-for="item in options2"
                  :key="item"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: center;padding-top: 5px;padding-bottom: 5px;">
          <el-button
            type="primary"
            size="small"
            v-if="appPath==1"
            @click="goBackWorkbench()"
          >返回</el-button>
          <el-button
            type="primary"
            size="small"
            @click="getList()"
          >查询
          <i class="el-icon-search"></i>
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="resetForm('queryForm')"
          >重置
          <i class="el-icon-refresh"></i>
          </el-button>
        </div>
    </el-form>
   </div>
    <!-- form end -->
      <div class="el-flex el-box-column " style="margin: 3px;">
        <el-card class="box-card el-card-flex" >
          <div slot="header" class="clearfix">
        <span>
          <i class="el-icon-position"></i>
            消息信息
        </span>
          </div>
            <!--:height="height"-->
          <div class="el-flex el-box-column" style="margin: 3px;" >
          <el-table
            v-loading="listLoading"
            :data="list"
            height="100%"
            style="width: 100%;"
            border stripe
            fit
            highlight-current-row
            class="tableStyle"
            @row-dblclick="messageDetailToggle"
          >
            <el-table-column type="index" align="center" width="60" label="序号" />
            <!--发件人-->
            <el-table-column width="150px" align="center" label="应用名称">
              <template slot-scope="scope">
                <span>{{ scope.row.appName}}</span>
              </template>
            </el-table-column>
            <!--标题-->
            <el-table-column align="center" label="消息标题" >
              <template slot-scope="scope">
                <span>{{ scope.row.mcTitle }}</span>
              </template>
            </el-table-column>
            <!--发送时间-->
            <el-table-column width="220px" align="center" label="时间">
              <template slot-scope="scope">
                <span>{{ scope.row.mcSendtime }}</span>
              </template>
            </el-table-column>
            <!--状态-->
            <el-table-column width="150px" align="center" label="状态">
              <template slot-scope="scope">
                <span>{{ scope.row.mcStatus==1?'已推送':'已阅读'}}</span>
              </template>
            </el-table-column>
            <!--操作-->
            <el-table-column width="100px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="messageDetailToggle(scope.row)"
              >查看</el-button>
            </template>
          </el-table-column>
          </el-table>
          </div>
          <pagination v-show="total>0" :total="total" :page.sync="queryForm.page"
                      :limit.sync="queryForm.limit"  @pagination="getList" />
        </el-card>
        <messageDetail ref="messageDetailDialog" />
      </div>
      <!-- table end -->
  </el-card>
</template>

<script>
  import { messageInfoList, messageUpdate,selectMessage} from '@/api/message/message-service'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import messageDetail from '@/views/message/component/messageDetailBox'
  import Vue from 'vue'

  export default {
    components: { Pagination, messageDetail },
    data() {
      return {
        appPath:'',//这个是协同工作台获取到的参数默认值
        height: 'calc(100% - 16px)',
        msg: '-',
        param_empcode: '',
        list: [],
        options: [{
          value: '任务中心',
          label: '任务中心'
        }, {
          value: '会议提醒',
          label: '会议提醒'
        }, {
          value: '公文提醒',
          label: '公文提醒'
        }, {
          value: '日程任务',
          label: '日程任务'
        }, {
          value: '邮件中心',
          label: '邮件中心'
        }],

        options2:[
          {
            value: 1,
            label: '已推送'
            },
          {
            value: 2,
            label: '已阅读'
          },
        ],

        listLoading: true,
        total: 0,
        select2:6,
        queryForm: {
          appName:'',
          mcStatus:'',
          msgTo: '',
          page: 1,
          limit: 10,
          msgTitle: '',
          startDate: null,
          endDate: null
          },
        inputRules: {

          },
        msgQueryForm: {
          page: 1,
          limit: 10,
          msgTitle: '',
          msgTo: '',
          appCode: 'app_task'
        }
      }
    },
    created() {

      this.appPath = this.$route.query.appPath; //  接收从协同工作台传递过来的参数

      const queryRange = localStorage.getItem('queryRange')
      this.queryForm.queryRange = queryRange
      this.param_empcode = this.$route.query.empcode
    },
    mounted() {
      if (this.param_empcode && this.param_empcode !== '') {
        this.msgQueryForm.msgTo = this.param_empcode
        this.queryForm.msgTo = this.param_empcode
        return
      }
      this.getList()

      const empcode = localStorage.getItem('empCode')
      if (!empcode || empcode === '') {
        Vue.prototype.loginUser()
      }
      if (empcode) {
        this.msgQueryForm.msgTo = empcode
        this.queryForm.msgTo = empcode
      } else {
        this.msgQueryForm.msgTo = 'sysadmin1'
        this.queryForm.msgTo = 'sysadmin1'
      }
    },
    methods: {

      // 判断是协同工作台过来的就会有返回按钮
      //  返回触发返回到上一页
      goBackWorkbench(){
        window.history.go(-1)
      },

      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      getList() {
        this.listLoading = true
        selectMessage(this.queryForm).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          // 假loading 1秒后消失
          setTimeout(() => {
            this.listLoading = false
          }, 300)
        })
      },
      // getMessageList() {
      //   this.listLoading = true
      //   messageInfoList(this.msgQueryForm).then(response => {
      //     this.messageList = response.data.records
      //     this.total = response.data.total
      //     // 假loading 1秒后消失
      //     setTimeout(() => {
      //       this.listLoading = false
      //     }, 300)
      //   })
      // },
      messageDetailToggle(row) {
        const messageStatus = row.mcStatus
        if (messageStatus !== 2) {
          row.mcStatus = 2
          messageUpdate(row.mcId, row)
        }

        this.$refs.messageDetailDialog.toggele(row)
      },
      tableRowClassName(row) {
        const msgObject = row.row
        const msgStatus = msgObject.mcStatus
        if (msgStatus === 2) {
          return ''
        }
        return 'message-unread'
      }
    }
  }
</script>

<style>
  .el-table .message-unread {
    font-weight: bolder;
  }
</style>
<style scoped lang="scss">
  @import "./index.scss";


  .el-table__header{
    font-size: 10px
  }
  .el-table{
    font-size: 12px
  }
  .div-body{
    margin-top: 5px;
  }
  .div-header{
    font-size: 12px
  }
  .el-form-item__label{
    font-size: 12px
  }
  element.style{
    padding-top: 0px;
  }
  /*fieldset {*/
    /*display: block;*/
    /*margin-inline-start: 1px;*/
    /*margin-inline-end: 1px;*/
    /*padding-block-start: 0.35em;*/
    /*padding-inline-start: 0.75em;*/
    /*padding-inline-end: 0.75em;*/
    /*padding-block-end: 0.625em;*/
    /*min-inline-size: min-content;*/
    /*border-width: 1px;*/
    /*border-style: solid;*/
    /*border-color: rgb(200, 202, 204);*/
    /*border-image: initial;*/
  /*}*/
  div.popContainer{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    color: white;
  }
</style>
